<template>
  <!-- 英雄区块 -->
  <section class="bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 text-white w-full overflow-hidden">
    <div class="flex flex-col lg:flex-row min-h-[70vh]">
      <div class="lg:w-1/2 pt-8 pb-16 px-4 md:px-8 lg:px-16 space-y-6 flex flex-col justify-center">
        <h1 class="text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight">
          首个应用于职业技能培训人工智能解决方案
        </h1>
        <p class="text-xl lg:text-2xl xl:text-3xl leading-tight text-blue-200 pt-2">
          弥补技能鸿沟，<span
            class="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-400 to-purple-200 animate-pulse font-bold">10倍</span>节省培训成本，最大化保障培训成功率
        </p>
        <div class="flex flex-col sm:flex-row gap-4 pt-6">
          <button class="px-8 py-3 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-100 transition-colors">
            请求试用
          </button>
        </div>
      </div>
      <!-- 下面注释起来的应该只是改成一整张图片 -->
      <div class="lg:w-1/2 lg:relative">
        <!-- 设置图片背景颜色为绿色, 高度为父视图高度 -->
        <img src="" alt="" class="w-full h-80 lg:absolute lg:inset-0 lg:h-full object-cover bg-green-500" />
      </div>
    </div>
  </section>
</template>
